<template>
	<view class="page page-block">
		<cl-message ref="message"></cl-message>
		<cl-list v-if="$common.hasLogin" v-for="(item, index) in list" :border="false" :key="index" :label="item.lable" @tap="click(item.type)">
			<image v-if="item.type == 0" class="head-img" :src="$common.user.photo"></image>
			<text v-if="item.type == 1" class="userinfo" @click="click(item.type)">{{user.name}}</text>
			<text v-if="item.type == 2" class="userinfo" @click="click(item.type)">{{user.gender == 0 ? '女' : user.gender == 1 ? '男' : '保密'}}</text>
			<text v-if="item.type == 3" slot="append" class="cl-icon-arrow-right"></text>
		</cl-list>
		<view v-else class="tip-wrapper">
			<text>你还没有登录，请先登录</text>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view v-if="type == 1" class="username-wrapper">
				<input type="text" focus="true" maxlength="16" v-model="usernameCache" placeholder="请输入新的用户名" />
				<view class="foot-wrapper">
					<view><button class="username-btn" @click="close">取消</button></view>
					<view><button class="username-btn" @click="confirmUsername" style="margin-left: 20rpx;">确定</button></view>
				</view>
			</view>
			<view v-if="type == 2" class="gender-wrapper">
				<text class="gender-title">性别</text>
				<radio-group @change="genderChange">
					<radio name="gender" value="1" @click="close" :checked="isChecked[2]">
						<i class="material-icons" style="visibility: hidden;">&#xe611;</i>
						<view class="gender-text">男</view>
					</radio>
					<radio name="gender" value="0" @click="close" :checked="isChecked[1]">
						<i class="material-icons" style="visibility: hidden;">&#xe611;</i>
						<view class="gender-text">女</view>
					</radio>
					<radio name="gender" value="-1" @click="close" :checked="isChecked[0]">
						<i class="material-icons" style="visibility: hidden;">&#xe611;</i>
						<view class="gender-text">保密</view>
					</radio>
				</radio-group>
				<button class="gender-cancel" @click="close">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				list: [{
						lable: "头像",
						type: "0",
						url: "/pages/setting/userInfo/changePhoto/changePhoto"
					},
					{
						lable: "用户名",
						type: "1"
					},
					{
						lable: "性别",
						type: "2"
					},
					{
						lable: "账号与安全",
						type: "3",
						url: "/pages/setting/accountSecurity/accountSecurity"
					}
				],
				type: 1,
				usernameCache: '',
				genderCache: '',
				isChecked: [false, false, false],
				user: {
					uid: '',
					name: '',
					phone: '',
					email: '',
					gender: '',
					qq: '',
					photo: ''
				}
			}
		},
		methods: {
			confirmUsername() {
				if (this.usernameCache.indexOf(" ") != -1) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "用户名不能包含空格",
						duration: 2000,
						iconSize: 24
					});
					return
				}
				var len = this.usernameCache.length;
				if (RegExp(/[\u2E80-\u9FFF]/).test(this.usernameCache)) {
					len = this.usernameCache.match(/[\u2E80-\u9FFF]/g).length + len;
				}
				// 若长度超过16或小于1
				if (len > 16 || len < 1) {
					this.$refs["message"].open({
						type: 'cancel',
						message: "用户名长度为1-16个字符(汉字算两个)",
						duration: 3000,
						iconSize: 24
					});
					return
				}
				this.$refs.popup.close();
				let user = {
					uid: this.user.uid,
					name: this.user.name,
					phone: this.user.phone,
					email: this.user.email,
					gender: this.user.gender,
					qq: this.user.qq,
					photo: null
				};
				user.name = this.usernameCache;
				this.$common.request(this.$serverUrl + "user", user, "PUT", this.successCallback);
			},
			close() {
				this.$refs.popup.close();
			},
			genderChange(e) {
				this.genderCache = e.detail.value;
				let user = {
					uid: this.user.uid,
					name: this.user.name,
					phone: this.user.phone,
					email: this.user.email,
					gender: this.user.gender,
					qq: this.user.qq,
					photo: null
				};
				user.gender = this.genderCache;
				this.$common.request(this.$serverUrl + "user", user, "PUT", this.successCallback);
				// 改变radio checked状态
				for (let i = 0; i < this.isChecked.length; i++) {
					if (i == (parseInt(user.gender) + 1)) {
						this.isChecked[i] = true;
					} else if (this.isChecked[i]) {
						this.isChecked[i] = false;
					}
				}
			},
			click(type) {
				if (type == 1) {
					this.type = 1;
					this.$refs.popup.open();
				} else if (type == 2) {
					this.type = 2;
					this.$refs.popup.open();
				} else {
					uni.navigateTo({
						url: this.list[type].url
					})
				}
			},
			successCallback(res) {
				if (res.data.statusCode == "200") {
					if (res.data.msg == "ok") {
						this.$refs["message"].open({
							type: 'success',
							message: "修改成功",
							duration: 2000,
							iconSize: 24
						});
						if (this.type == 1) {
							this.user.name = this.usernameCache;
						} else if (this.type == 2) {
							this.user.gender = this.genderCache;
						}
					} else {
						this.$common.showModal(res.data.msg, false);
					}
				}
			},
			onLoad() {
				if (this.$common.hasLogin) {
					this.user = this.$common.user;
				}
			},
			onShow() {
				if (this.$common.hasLogin) {
					this.isChecked[parseInt(this.$common.user.gender) + 1] = true;
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("userInfo.css");

	/deep/ .cl-message {
		&__content {
			font-size: 16px;
		}
	}

	/deep/ .cl-list {
		&__label {
			font-size: 16px;
		}
	}
</style>
